
<link rel="stylesheet" href="/static/kanban/css/common.css">
<link rel="stylesheet" href="/static/kanban/css/map.css">

<div class="data">

    <div class="data-title">
        <div class="title-left fl"></div>
        <div class="title-center fl"></div>
        <div class="title-right fr"></div>
    </div>
    <div class="data-content">
        <div class="con-left fl">
            <div class="left-top">
                <div class="info">
                    <div class="info-title">实时统计</div>
                    <img src="/static/kanban/img/bj-1.png" alt="" class="bj-1">
                    <img src="/static/kanban/img/bj-2.png" alt="" class="bj-2">
                    <img src="/static/kanban/img/bj-3.png" alt="" class="bj-3">
                    <img src="/static/kanban/img/bj-4.png" alt="" class="bj-4">
                    <div class="info-main">
                        <div class="info-1">
                            <div class="info-img fl">
                                <img src="/static/kanban/img/info-img-1.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>设备总数</p>
                                <p id="dev_total_sum"></p>
                            </div>
                        </div>
                        <div class="info-2">
                            <div class="info-img fl">
                                <img src="/static/kanban/img/info-img-2.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>当前在线</p>
                                <p id="dev_online_sum"></p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="/static/kanban/img/info-img-3.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今日活跃</p>
                                <p id="dev_active_sum">12,457</p>
                            </div>
                        </div>
                        <div class="info-4">
                            <div class="info-img fl">
                                <img src="/static/kanban/img/info-img-4.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>报警设备</p>
                                <p id="dev_alarm_sum"></p>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="top-bottom">
                    <div class="title">本月设备运行统计</div>
                    <img src="/static/kanban/img/bj-1.png" alt="" class="bj-1">
                    <img src="/static/kanban/img/bj-2.png" alt="" class="bj-2">
                    <img src="/static/kanban/img/bj-3.png" alt="" class="bj-3">
                    <img src="/static/kanban/img/bj-4.png" alt="" class="bj-4">
                    <div id="echarts_1" class="charts"></div>
                </div>
            </div>
            <div class="left-bottom">
                <div class="title">本月报警数据统计</div>
                <img src="/static/kanban/img/bj-1.png" alt="" class="bj-1">
                <img src="/static/kanban/img/bj-2.png" alt="" class="bj-2">
                <img src="/static/kanban/img/bj-3.png" alt="" class="bj-3">
                <img src="/static/kanban/img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_2" class="charts"></div>
            </div>
        </div>
        <div class="con-center fl">
            <div class="map-num">
                <p></p>
                <button id="leave_board" class="layui-btn layui-btn-radius layui-btn-normal"><a href="#dynamic"><i class="layui-icon">&#xe65b;</i>详情</a> </button>
                <!-- <img id="leave_board" type="button" src="/static/kanban/img/turn_to.png" alt="" style="width: 108px;height: auto" > -->
                <!-- <div class="num">
                    <span>1</span>
                    <span>,</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>,</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                </div> -->
            </div>
            <!-- <div style="position: absolute;bottom: 200px;width: 100%;z-index: 999"><button class="layui-btn layui-btn-fluid">lalala</button></div> -->
            <div class="cen-top" id="map"></div>
            <div class="cen-bottom">
                <div class="title">本月报警高峰时段统计</div>
                <img src="/static/kanban/img/bj-1.png" alt="" class="bj-1">
                <img src="/static/kanban/img/bj-2.png" alt="" class="bj-2">
                <img src="/static/kanban/img/bj-3.png" alt="" class="bj-3">
                <img src="/static/kanban/img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_3" class="charts"></div>
            </div>
        </div>
        <div class="con-right fr">
            <div class="right-top">
                <div class="title">本月健康数据统计</div>
                <img src="/static/kanban/img/bj-1.png" alt="" class="bj-1">
                <img src="/static/kanban/img/bj-2.png" alt="" class="bj-2">
                <img src="/static/kanban/img/bj-3.png" alt="" class="bj-3">
                <img src="/static/kanban/img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_4" class="charts"></div>
            </div>
            <div class="right-center">
                <div class="title">本月健康数据TOP5</div>
                <img src="/static/kanban/img/bj-1.png" alt="" class="bj-1">
                <img src="/static/kanban/img/bj-2.png" alt="" class="bj-2">
                <img src="/static/kanban/img/bj-3.png" alt="" class="bj-3">
                <img src="/static/kanban/img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_5" class="charts"></div>
            </div>
            <div class="right-bottom">
                <div class="title">本月报警次数TOP5</div>
                <img src="/static/kanban/img/bj-1.png" alt="" class="bj-1">
                <img src="/static/kanban/img/bj-2.png" alt="" class="bj-2">
                <img src="/static/kanban/img/bj-3.png" alt="" class="bj-3">
                <img src="/static/kanban/img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_6" class="charts"></div>
            </div>
        </div>
    </div>
</div>


<script src="/static/kanban/MarkerClusterer.js"></script>
<script src="/static/kanban/TextIconOverlay.js"></script>
<script src="/static/kanban/js/echarts.min.js"></script>
<!-- <script src="/static/kanban/js/china.js"></script> -->
<!-- <script src="/static/kanban/js/echarts.js"></script> -->

<script type="text/javascript">

$('#dev_total_sum').text(device.length.toString())
$('#dev_online_sum').text(dev_status_detail['online'].length.toString())
var dev_active_sum=dev_status_detail['online'].length-dev_status_detail['sleep'].length
$('#dev_active_sum').text(dev_active_sum.toString())
$('#dev_alarm_sum').text(dev_status_detail['alarm'].length.toString())
$('#leave_board').click(function(){
    turn_to_page('dynamic')
    // alarm_show_func();
})




var echarts_1=function(data){
    var option = {

        tooltip: {trigger: 'axis',formatter:function(obj){
            return '在线率：'+obj[0].value+'% ，'+'活跃率：'+obj[1].value+'%'
        }},
        legend: {
            formatter: function (name) {
                return name;
            },
            right:10,
        },
        grid:{x:30,y:45,x2:20,y2:40,borderWidth:10},
        calculable: true,
        xAxis: [{type: 'category',axisLabel: {textStyle:{color: '#ccc',fontSize:'12'}},data: []}],
        yAxis: [{type: 'value',show:false}],
        label: {normal: {show: true,formatter: '{c}%'}},
        series: [
            {name: '在线',type: 'bar',data: [],
            markPoint: {label: {normal: {show: true,formatter: '{c}%'}},data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},
            markLine: {label: {normal: {show: true,formatter: '{c}%'}},data: [{type: 'average', name: '平均值'}]}
            },
            {name: '活跃',type: 'bar',data: [],
            markPoint: {label: {normal: {show: true,formatter: '{c}%'}},data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},
            markLine: {label: {normal: {show: true,formatter: '{c}%'}},data: [{type: 'average', name: '平均值'}]}
            }
        ]
    };

    active=data.active
    online=data.online
    active_xAxis=[]
    for(var i=0;i<online.length;i++){
        var days=(i+1).toString()+'日'
        active_xAxis.push(days)
    }
    // 在线活跃时间轴数据填充
    option.xAxis[0].data=active_xAxis
    // 在线时间数据填充
    option.series[0].data=online
    // 活跃时间数据填充
    option.series[1].data=active
    var echarts_div = echarts.init(document.getElementById('echarts_1'),{});
    echarts_div.setOption(option)
    window.addEventListener("resize",function(){
     echarts_div.resize();
  });
}


alarm_td={'blood_alarm': [],
'circle': [],
'device_id': "9613051350",
'efence': [],
'h_pres_heig': [],
'h_pres_low': [],
'heart_alarm': [],
'heart_high': [],
'heart_low': [],
'l_pres_heig': [],
'l_pres_low': [],
'polygon': [],
'rectangle': [],
'sos_alarm': [],
'stop_alarm': [],
'tumble_alarm': []}


var echarts_2=function(data){
  console.log(data)
  var efe_num=data.circle+data.rectangle+data.polygon
  // 指定图表的配置项和数据
  var option = {
    tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},
    // grid:{x:20,y:20,x2:20,y2:10,borderWidth:10},
    // legend: {orient: 'vertical',left: 'left',data: ['SOS报警','舒张压低报警','舒张高低报警','收缩压高报警','收缩压报低警','心率低报警','心率高报警','电子围栏报警','摔倒报警']},
    series: [
        {name: '报警占比',type: 'pie',radius: '50%',center: ['50%', '65%'],
        data: [
            {value: data.sos_alarm, name: 'SOS报警'+'-'+data.sos_alarm+'次',attch:'sos_alarm'},
            {value: data.l_pres_low, name: '舒张压低报警'+'-'+data.l_pres_low+'次',attch:'l_pres_low'},
            {value: data.l_pres_heig, name: '舒张高低报警'+'-'+data.l_pres_heig+'次',attch:'l_pres_heig'},
            {value: data.h_pres_heig, name: '收缩压高报警'+'-'+data.h_pres_heig+'次',attch:'h_pres_heig'},
            {value: data.h_pres_low, name: '收缩压报低警'+'-'+data.h_pres_low+'次',attch:'h_pres_low'},
            {value: data.heart_low, name: '心率低报警'+'-'+data.heart_low+'次',attch:'heart_low'},
            {value: data.heart_high, name: '心率高报警'+'-'+data.heart_high+'次',attch:'heart_high'},
            {value: efe_num, name: '电子围栏报警'+'-'+efe_num+'次',attch:'efence'},
            {value: data.low_power, name: '低电量报警'+'-'+data.low_power+'次',attch:'low_power'},
            {value: data.fall_down, name: '摔倒报警'+'-'+data.fall_down+'次',attch:'fall_down'}
        ],
        emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}
        }
    ]
  }
  var echarts_div = echarts.init(document.getElementById('echarts_2'),{});
  echarts_div.setOption(option);
  window.addEventListener("resize",function(){
     echarts_div.resize();
  });
}


function echarts_3(data) {

    option = {  
        tooltip: {trigger: 'axis'},
        grid:{x:20,y:20,x2:20,y2:40,borderWidth:10},
        xAxis: [
            {type: 'category',axisTick:{show:false},boundaryGap : false, axisLabel: {textStyle:{color: '#ccc',fontSize:'12'},lineStyle:{color:'#2c3459',},
            interval: {default: 0},rotate:50,
                    formatter : function(params){
                        var newParamsName = "";// 最终拼接成的字符串
                        var paramsNameNumber = params.length;// 实际标签的个数
                        var provideNumber = 4;// 每行能显示的字的个数
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                        /**
                         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                         */
                        // 条件等同于rowNumber>1
                        if (paramsNameNumber > provideNumber) {
                            /** 循环每一行,p表示行 */
                            var tempStr = "";
                            tempStr=params.substring(0,4);
                            newParamsName = tempStr+"...";// 最终拼成的字符串
                        } else {
                            // 将旧标签的值赋给新标签
                            newParamsName = params;
                        }
                        //将最终的字符串返回
                        return newParamsName
                    }
                },
                data: ['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时','13时','14时','15时','16时','17时'
                            ,'18时','19时','20时','21时','22时','23时']
            }
        ],
        yAxis: [{type: 'value',show:false}
        ],
        series: [
            {name: '报警次数',type: 'line',stack: '总量',
             areaStyle: {normal: {
                        color: '#FF5722' //改变区域颜色
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#8cd5c2', //改变折线点的颜色
                        lineStyle: {
                            color: 'red' //改变折线颜色
                        }
                    }
                },
                data: data
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('echarts_3'),{});
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}


var hdd={'all_query_time': 31677585,
'all_stop_time': 8799.3,
'blood_pres': {h_pres: 125, l_pres: 76.3},
'device_id': "9613051350",
'heart_rate': 79.5,
'sleep_time': 0,
'speed': 0,
'step_count': 0,
'stop_counts': 0}



function echarts_4(data) {


  var radar_value=[]
  radar_value.push(data['step_count'])
  radar_value.push(data['stop_time'])
  radar_value.push(data['sleep'])
  radar_value.push(data['heart_rate'])
  radar_value.push(data['l_pres'])
  radar_value.push(data['h_pres'])
  radar_name_list=['运动步数','停留时长','睡眠时长','平均心率','收缩压','舒张压']
  // console.log(radar_value)

  var option = {
       tooltip: {
        trigger: 'item',
    },   

      radar: [
              { 
              indicator: [
                  { name: '运动步数'+radar_value[0], max: 10000 },
                  { name: '停留时长'+radar_value[1], max: 12 },
                  { name: '睡眠时长'+radar_value[2], max: 10 },
                  { name: '平均心率'+radar_value[3], max: 100 },
                  { name: '舒张压'+radar_value[4], max: 85 },
                  { name: '收缩压'+radar_value[5], max: 125 }
              ],
              center: ['50%', '45%'],
              radius: 60
          }
      ],
      series: [
          {
              name: '健康数据',
              type: 'radar',
              areaStyle: {
                    normal: {
                        color: '#1E9FFF' //改变区域颜色
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#8cd5c2', //改变折线点的颜色
                        lineStyle: {
                            color: '#2F4056' //改变折线颜色
                        }
                    }
                },
              data: [
                  {
                      value: radar_value,
                      name:'健康数据雷达图'
                  }
              ]
          }
      ]
  }
  var echarts_div = echarts.init(document.getElementById('echarts_4'),{});
  echarts_div.setOption(option);
  window.addEventListener("resize",function(){
     echarts_div.resize();
  });
}


var echarts_5=function(data){
    var option = {
        tooltip: {
        trigger: 'item',
    },  
        dataset: {
            source: [
            ]
        },
        grid:{x:80,y:10,x2:40,y2:30,borderWidth:10},
        xAxis: {name: 'score',axisLabel: {textStyle:{color: '#ccc',fontSize:'12'}}},
        yAxis: {type: 'category',axisLabel: {textStyle:{color: '#ccc',fontSize:'12'}}},
        series: [{type: 'bar',
                    encode: {   
                    x: 'score',// Map the "amount" column to X axis.
                    y: 'name'},
                    itemStyle: {normal: {color: function(params) {
                        var colorList = ['#cca272','#74608f','#d7a02b','#c8ba23',];
                        return colorList[params.dataIndex]
                    }}}
                }]  
    };

    var source=[['score', 'name']]
    for(var k in data){
        var dev_name=get_detail_from_id(device,k)
        if(dev_name){
            source.push([data[k],dev_name.user_name])
        }
    }
    
    random_data=[[10,'张珊'],[20,'李肆'],[30,'王屋'],[40,'陆陆'],[45,'陆柒']]
    var num=source.length
    if(num<5){
        for(var i=0;i<6-num;i++){
            console.log(num,random_data[i])
            source.push(random_data[i])
        }
    }
    option.dataset.source=source
    var echarts_div = echarts.init(document.getElementById('echarts_5'),{});
    echarts_div.setOption(option)
    window.addEventListener("resize",function(){
     echarts_div.resize();
  });
}

var echarts_6=function(data){
    var option = {
        tooltip: {
        trigger: 'item',
    },  
        dataset: {
            source: [
            ]
        },
        grid:{x:80,y:10,x2:40,y2:30,borderWidth:10},
        xAxis: {name: 'score',axisLabel: {textStyle:{color: '#ccc',fontSize:'12'}}},
        yAxis: {type: 'category',axisLabel: {textStyle:{color: '#ccc',fontSize:'12'}}},
        series: [{type: 'bar',
                    encode: {   
                    x: 'score',// Map the "amount" column to X axis.
                    y: 'name'},
                    itemStyle: {normal: {color: function(params) {
                        var colorList = ['#cca272','#74608f','#d7a02b','#c8ba23',];
                        return colorList[params.dataIndex]
                    }}}
                }]  
    };

    var source=[['score', 'name']]
    for(var k in data){
        var dev_name=get_detail_from_id(device,k)
        if(dev_name){
            source.push([data[k],dev_name.user_name])
        }
    }
    
    random_data=[[1,'张珊'],[2,'李肆'],[3,'王屋'],[4,'陆陆'],[5,'陆柒']]
    var num=source.length
    if(num<5){
        for(var i=0;i<6-num;i++){
            console.log(num,random_data[i])
            source.push(random_data[i])
        }
    }
    option.dataset.source=source
    var echarts_div = echarts.init(document.getElementById('echarts_6'),{});
    echarts_div.setOption(option)
    window.addEventListener("resize",function(){
     echarts_div.resize();
  });
}


setTimeout(function(){
    $.ajax({
            type: 'GET',
            url:"?what=kanban",
            async:true,
            dataType: 'json',
            success: function(data) {
                console.log(data)
                echarts_1(data)
                echarts_2(data.alarm_kind)
                echarts_3(data.alarm_time)
                echarts_4(data)
                echarts_5(data.health_rank)
                echarts_6(data.alarm_rank)



            },
        });
 // echarts_1('data')
 
 
 
     var map = new BMap.Map("map");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(105.904, 37.915), 5); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);
    map.enableAutoResize();

    var cluster_markers=[]
    for(var i=0;i<device.length;i++){
      var lng=device[i]['lng']
      var lat=device[i]['lat']
      var pt_trail = new BMap.Point(lng,lat);
      cluster_markers.push(new BMap.Marker(pt_trail));
    };
    var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:cluster_markers});
},1000)




</script>
